<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../bootstrap-table/bootstrap-table.css"/>
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../../toastr/toastr.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../css/layui.css">
    <link rel="stylesheet" href="../../css/layer.css">


</head>
<body>

<div class="modal fade" id="updateStyleModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
            </div>
            <div class="modal-body">
                <div id="insertcarinfo" role="form">
                    <div class="form-group col-md-9">
                        <!--车辆型号-->
                        <label for="model_id">车辆型号</label>
                        <select id="model_id" name="c_brand" class="form-control">
                            <option selected value="1">QY8T</option>
                            <option  value="2">QY12T</option>
                            <option  value="3">QY16T</option>
                            <option  value="4">QY25T</option>
                            <option  value="5">QY50T</option>
                            <option  value="6">QY75T</option>
                            <option  value="7">QY100T</option>
                            <option  value="8">QY150T</option>
                        </select>
                    </div>
                    <!--车型图片-->
                    <img src="../../images/crane.jpg" id="images" class="rounded mx-auto d-block" width="200px" height="200px">
                    <!--品牌-->
                    <div class="form-row">
                        <div class="form-group col-md-9">
                            <div class="custom-file">
                                <input type="file" class="custom-file-input files" name="files" id="customFile">
                                <label class="custom-file-label" for="customFile">更新车型样式</label>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <button class="btn btn-primary" type="button" id="refresh">预览</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class='col-sm-12'>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">车型信息</span>
                                    </div>
                                    <textarea class="form-control" id="description" aria-label="With textarea"></textarea>
                                </div>

                            </div>
                        </div>
                    </div>


                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="updateStyleCommit">更新</button>
            </div>
        </div>

    </div>
</div>
<div class="model">
    <div class="panel-body">
        <div id="map" style="width:97%;height: 510px;float: left">
            <!-- 这边是将要存放的地图画布 -->
        </div>
    </div>
</div>
<div class="btn btn-outline-dark" id="updateStyle" style="margin-left: 830px;margin-top: 3px">更新车型信息</div>
</body>
<script src="../../jquery/jquery-3.4.1.min.js"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<script src="../../bootstrap-table/bootstrap-table.js"></script>
<script src="../../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="../../js/moment-with-locales.js"></script>
<script src="../../bootstrap/js/bootstrap-datetimepicker.min.js"></script>
<script src="../../toastr/toastr.min.js"></script>
<script src="../../js/company.js"></script>
<script src="../../js/echarts.js"></script>
<script src="../../js/shanxi.js"></script>
<script src="../../js/china.js"></script>
<script src="../../js/world.js"></script>
<script type="text/javascript">

    var cranePath = 'image://../../images/caranecousor.png';
    var sign = 'image://../../images/cranesign.png';
    //随机颜色函数
    function randomValue() {
        return Math.round(Math.random() * 1000);
    }
    //点数据
    var testPointdata = [{
        "name": "运城市",
        "log": 111.003957,
        "lat": 35.022778,
        "remark": "备注运城市"
    },
        {
            "name": "吕梁市",
            "log": 111.134335,
            "lat": 37.524366,
            "remark": "备注吕梁市"
        },
        {
            "name": "晋中市",
            "log": 112.736465,
            "lat": 37.696495,
            "remark": "备注晋中市"
        },
        {
            "name": "唐山市",
            "log": 118.175393,
            "lat": 39.635113,
            "remark": "备注唐山市"
        },
        {
            "name": "西青区",
            "log": 117.012247,
            "lat": 39.139446,
            "remark": "备注西青区"
        },

    ];
    //线数据（state代表线路是否通畅，0线路正常，1线路损坏）
    var testLinedata = [{
        "fromName": "运城市",
        "toName": "吕梁市",
        "state": 0
    },
        {
            "fromName": "运城市",
            "toName": "晋中市",
            "state": 0
        },
        {
            "fromName": "运城市",
            "toName": "唐山市",
            "state": 0
        },
        {
            "fromName": "运城市",
            "toName": "西青区",
            "state": 0
        },
        {
            "fromName": "吕梁市",
            "toName": "西青区",
            "state": 0
        },
        {
            "fromName": "晋中市",
            "toName": "西青区",
            "state": 0
        },
        {
            "fromName": "唐山市",
            "toName": "西青区  ",
            "state": 0
        },

    ];
    MyEChartsMap(testPointdata, testLinedata, '服务器状态');
    function MyEChartsMap(dataPoint, dataLine,title) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("map"));

        $("#ServerState").html(title);

        var option = new Object();

        //配置信息
        option = {
            backgroundColor: '#404a59',
            title : {
                text: '星辰大海吊装租赁',
                subtext: '租赁地点',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {

                formatter: function(params) {
                    //这里如果不希望内容在一行显示也可以自定义css
                    switch(params.seriesType) {
                        case "scatter":
                            //点提示信息
                            return "站点名称：" + params.name + ",说明：" + params.value.toString().split(',')[2];
                            break;
                        case "lines":
                            //线提示信息
                            return params.data['fromName'] + "~" + params.data['toName'];
                            break;
                        case "map":
                            //面提示信息
                            return "区域：" + params.name + ",指数：" + params.value;
                            break;
                    }
                }
            },

            /*地图设置*/
            visualMap: {
                min: 0, //最小颜色
                max: 1500, //最大颜色
                left: 'left',
                top: 'bottom',
                text: ['High', 'Low'],
                seriesIndex: [1],
                inRange: {
                    color: ['#494E52', '#2B2E30'] //色彩区间
                },
                calculable: true
            },
            geo: {
                map: 'china',
                roam: true,
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: 'rgba(0,0,0,0.4)'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis: {
                        areaColor: null,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            /*地图设置结束*/

            /*数据源*/
            series: [
                //点数据
                {
                    type: 'scatter', //类型，表示点数据
                    coordinateSystem: 'geo',
                    data: convertPointData(dataPoint), //数据源
                    symbolSize: 12, //标记点大小
                    //标记样式：可使用svg图标
                    //symbol: 'path://M512 64C306.4 64 140 230.4 140 436c0 101.6 40.8 194.4 107.2 261.6L512 960l264-263.2c66.4-67.2 107.2-159.2 107.2-261.6C884 230.4 717.6 64 512 64z m128 331.2c-4.8 62.4-54.4 112-116.8 116.8-75.2 6.4-138.4-53.6-138.4-127.2 0-70.4 57.6-128 128-128 73.6 0 133.6 63.2 127.2 138.4z',
                    //symbol: 'path://M877.632 456.8c14.976-14.72 20.384-32.96 14.816-49.984-5.536-17.024-20.608-28.544-41.344-31.584l-190.24-27.84c-6.976-1.024-18.464-9.472-21.6-15.904l-85.12-173.696c-9.28-18.944-24.896-29.76-42.88-29.76-17.952 0-33.6 10.816-42.816 29.76l-85.12 173.696c-3.104 6.432-14.592 14.848-21.6 15.904l-190.24 27.84c-20.704 3.04-35.776 14.56-41.344 31.584-5.568 17.024-0.16 35.232 14.816 49.984l137.696 135.232c5.088 4.992 9.536 18.816 8.32 25.92l-32.48 190.912c-3.552 20.832 2.752 38.816 17.344 49.344 7.52 5.44 16.224 8.16 25.472 8.16 8.576 0 17.6-2.336 26.56-7.04l170.176-90.176c6.048-3.2 20.448-3.2 26.528 0l170.144 90.112c18.528 9.856 37.504 9.44 52.064-1.056 14.56-10.528 20.864-28.48 17.344-49.28l-32.48-190.976c-1.28-7.104 3.2-20.928 8.32-25.92l137.664-135.232z',
                    symbol:sign,
                    //角度信息
                    symbolRotate: 0,
                    //鼠标选中说明
                    label: {
                        normal: {
                            formatter: '{b}', //tooltip显示，自定义参考上方例子
                            position: 'left', //对齐
                            show: false //是否一直显示
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#273746' //颜色信息
                        }
                    }
                },
                //底图数据-蓝色部分。
                {
                    name: 'categoryA',
                    type: 'map',
                    geoIndex: 0,
                    data: [{
                        name: '北京',
                        value: randomValue()
                    }, // randomValue() 表示一个随机的颜色数据，如需固定颜色请修改为确定的数字
                        {
                            name: '天津',
                            value: randomValue()
                        }, //  颜色设置参考visualMap模块
                        {
                            name: '上海',
                            value: randomValue()
                        },
                        {
                            name: '重庆',
                            value: randomValue()
                        },
                        {
                            name: '河北',
                            value: randomValue()
                        },
                        {
                            name: '河南',
                            value: randomValue()
                        },
                        {
                            name: '云南',
                            value: randomValue()
                        },
                        {
                            name: '辽宁',
                            value: randomValue()
                        },
                        {
                            name: '黑龙江',
                            value: randomValue()
                        },
                        {
                            name: '湖南',
                            value: randomValue()
                        },
                        {
                            name: '安徽',
                            value: randomValue()
                        },
                        {
                            name: '山东',
                            value: randomValue()
                        },
                        {
                            name: '新疆',
                            value: randomValue()
                        },
                        {
                            name: '江苏',
                            value: randomValue()
                        },
                        {
                            name: '浙江',
                            value: randomValue()
                        },
                        {
                            name: '江西',
                            value: randomValue()
                        },
                        {
                            name: '湖北',
                            value: randomValue()
                        },
                        {
                            name: '广西',
                            value: randomValue()
                        },
                        {
                            name: '甘肃',
                            value: randomValue()
                        },
                        {
                            name: '山西',
                            value: randomValue()
                        },
                        {
                            name: '内蒙古',
                            value: randomValue()
                        },
                        {
                            name: '陕西',
                            value: randomValue()
                        },
                        {
                            name: '吉林',
                            value: randomValue()
                        },
                        {
                            name: '福建',
                            value: randomValue()
                        },
                        {
                            name: '贵州',
                            value: randomValue()
                        },
                        {
                            name: '广东',
                            value: randomValue()
                        },
                        {
                            name: '青海',
                            value: randomValue()
                        },
                        {
                            name: '西藏',
                            value: randomValue()
                        },
                        {
                            name: '四川',
                            value: randomValue()
                        },
                        {
                            name: '宁夏',
                            value: randomValue()
                        },
                        {
                            name: '海南',
                            value: randomValue()
                        },
                        {
                            name: '台湾',
                            value: randomValue()
                        },
                        {
                            name: '香港',
                            value: randomValue()
                        },
                        {
                            name: '澳门',
                            value: randomValue()
                        },
                        {
                            name: '南海诸岛',
                            value: randomValue()
                        }
                    ]
                },
                //线数据01  -- 正常
                {
                    tooltip: {},
                    type: 'lines',
                    zlevel: 20,
                    symbol: ['none', 'arrow'],
                    symbolSize: 6,
                    //动画
                    effect: {
                        show: true,
                        period: 3,
                        trailLength: 0,
                        //移动点样式。可使用预制，也可使用svg自定义。
                        //symbol: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
                        //symbol: 'triangle',
                        symbol:cranePath,
                        symbolSize: 12
                    },
                    lineStyle: {
                        normal: {
                            type: 'solid',
                            color: '#a6c84c', //线条颜色
                            width: 1,
                            opacity: 0.6,
                            curveness: 0.2
                        }
                    },
                    data: convertLineData(dataLine, dataPoint, 0)
                },
                //线数据02 --损坏
                {
                    tooltip: {},
                    type: 'lines',
                    zlevel: 20,
                    symbol: ['none', 'arrow'],
                    symbolSize: 6,
                    //动画效果--异常线路不显示动画
                    effect: {
                        show: false,
                        period: 3,
                        trailLength: 0,
                        //symbol: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
                        symbol: 'triangle',
                        symbolSize: 6
                    },
                    lineStyle: {
                        normal: {
                            type: 'dashed',
                            color: '#FF3333', //线条颜色
                            width: 1,
                            opacity: 0.6,
                            curveness: 0.2
                        }
                    },
                    data: convertLineData(dataLine, dataPoint, 1)
                }
            ]
        };

        myChart.setOption(option, true);
        //绑定单击事件
        myChart.on('click', function(params) {
            switch(params.seriesType) {
                case "lines":
                    //单击线
                    alert(params.data['fromName'] + "~" + params.data['toName']);

                    break;
                //单击面
                case 'map':
                    alert(params.name);
                    break;
                //单击点
                case "scatter":
                    alert("站点名称：" + params.name + ",说明：" + params.value.toString().split(',')[2]);
                    break;
            }
        });

    }

    /**
     * 组合点数据
     * @param {Object} data
     */
    function convertPointData(data) {
        var res = [];
        for(item in data) {
            res.push({
                name: data[item].name,
                value: [data[item].log, data[item].lat, data[item].remark]

            });
        }
        return res;
    }

    /**
     * 组合线数据
     * @param {Object} dataline 线数据
     * @param {Object} datapoint 点数据
     * @param{Object} type 线类型（0正常，1损坏）
     */
    function convertLineData(dataline, datapoint, type) {
        var res0 = [];
        var res1 = [];
        for(var i = 0; i < dataline.length; i++) {
            var fromName = dataline[i].fromName;
            var toName = dataline[i].toName;
            var state = dataline[i].state;
            if(state == 0) {
                res0.push({
                    fromName: fromName,
                    toName: toName,
                    coords: [SearchData(fromName, datapoint), SearchData(toName, datapoint)]
                })
            } else {
                res1.push({
                    fromName: fromName,
                    toName: toName,
                    coords: [SearchData(fromName, datapoint), SearchData(toName, datapoint)]
                })
            }

        }
        if(type == 0) {
            return res0;
        } else {
            return res1;
        }
    };

    /**
     * 在点数据中查找对应数据经纬度
     * @param {Object} name
     * @param {Object} datapoint
     */
    function SearchData(name, datapoint) {
        var value = [];
        var i = 0;
        while(i < datapoint.length) {

            if(name == datapoint[i].name) {
                value.push(datapoint[i].log, datapoint[i].lat);
                break;
            } else {
                i++;
                continue;
            }
        }
        return value;
    }
</script>
</html>